<template>
   <div class="chgStatusForm">
      <el-dialog title="发布活动"  :visible.sync= "refresh" :before-close="handleClose" >
        <el-form>
          <el-row>
            <el-col :span="4" class="spanLelft" :offset="2">{{'发布状态:'}}</el-col>
            <el-col :span="14" class="spanRight">
              <el-select v-model="publishStatus" placeholder="请选发布状态" class="select">
                <el-option label="未发布" value="NOT_YET" :disabled="chgPublish.editFormNoPublishVisible"></el-option>
                <el-option label="发布中" value="STARTING"></el-option>
                <el-option label="已下架" value="END"></el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" :offset="1" style="font-weight: bold;margin-top:10px">发布终端及位置:</el-col>
            <el-col  class="spanRight" :span="12" :offset="2">
              <div class="myCheckBox">
                <template>
                  <el-row>
                    <el-col :span="8" class="spanCheckBoxLelft">
                      <el-checkbox :indeterminate="hctIsIndeterminate" v-model="hctCheckAll" @change="hctAllChange">华财通
                      </el-checkbox>
                    </el-col>
                    <el-col :span="14" class="spanRight">
                      <el-checkbox-group v-model="hctCheckedLocations" @change="hctCheckedChange">
                        <el-checkbox v-for="location in locations" :label="location" :key="location">{{location}}
                        </el-checkbox>
                      </el-checkbox-group>
                    </el-col>
                  </el-row>
                </template>
              </div>
              <div class="myCheckBox">
                <template>
                  <el-row>
                    <el-col :span="8" class="spanCheckBoxLelft">
                      <el-checkbox :indeterminate="lcsIsIndeterminate" v-model="lcsCheckAll" @change="lscAllChange">理财师
                      </el-checkbox>
                    </el-col>
                    <el-col :span="14" class="spanRight">
                      <el-checkbox-group v-model="lcsCheckedLocations" @change="lscCheckedChange">
                        <el-checkbox v-for="location in locations" :label="location" :key="location">{{location}}
                        </el-checkbox>
                      </el-checkbox-group>
                    </el-col>
                  </el-row>
                </template>
              </div>
              <div class="myCheckBox">
                <template>
                  <el-row>
                    <el-col :span="8" class="spanCheckBoxLelft">
                      <el-checkbox :indeterminate="pcIsIndeterminate" v-model="pcCheckAll" @change="pcAllChange">{{'PC端  '}} </el-checkbox>
                    </el-col>
                    <el-col :span="14" class="spanRight">
                      <el-checkbox-group v-model="pcCheckedLocations" @change="pcCheckedChange">
                        <el-checkbox v-for="location in locations" :label="location" :key="location">{{location}}
                        </el-checkbox>
                      </el-checkbox-group>
                    </el-col>
                  </el-row>
                </template>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeForm">取 消</el-button>
          <el-button type="primary" @click="subMit">确 定</el-button>
        </div>
      </el-dialog>
   </div>
</template>

<script type="text/ecmascript-6">
  const loactionOptions = ['首页', '活动中心'];
  import {postLog} from 'api/common/index.js';
  export default {
    props:['actStatus'],
    data () {
      return {
        chgPublish: {
          disableNoPublishVisible: false
        },
        showPubishActId: this.$store.state.chgStatusActId,
        hctCheckAll: false,
        lcsCheckAll: false,
        pcCheckAll: false,
        hctCheckedLocations: [],
        lcsCheckedLocations: [],
        pcCheckedLocations: [],
        locations: loactionOptions,
        hctIsIndeterminate: false,
        lcsIsIndeterminate: false,
        pcIsIndeterminate: false,
        editFormVisible: false,
        chgActStatusFormVisible: this.$store.state.chgStatusActFormVisible,
        publishStatus: '',
        submitStatusData: {
          'activityId': this.$store.state.chgStatusActId,
          'publishStatus': '',
          'publish_HCT': 'NO',
          'publish_HCT_top': 'NO',
          'publish_LCS': 'NO',
          'publish_LCS_top': 'NO',
          'publish_PC': 'NO',
          'publish_PC_top': 'NO'
        }
      }
    },
    computed:{
        refresh(){

          this.chgActStatusFormVisible = this.$store.state.chgStatusActFormVisible;
          if( this.chgActStatusFormVisible) {
            this.getActPublishStatus();
          }

          return this.$store.state.chgStatusActFormVisible;
        }
    },
    methods: {
      handleClose(done) {
         this.closeForm();
      },
      getActPublishStatus () {
        this.hctCheckedLocations = []
        this.lcsCheckedLocations = []
        this.pcCheckedLocations = []
//        console.log(this.$store.state.chgStatusActId);
        this.$http.get('/api-active/v1/api/activityCenter/activity/publish/' + this.$store.state.chgStatusActId + '').then((response) => {
          var data = response.body.result
          if (data.publish_HCT === 'YES') {
            this.hctCheckedLocations.push('活动中心')
          }

          if (data.publish_HCT_top === 'YES') {
            this.hctCheckedLocations.push('首页')
          }

          if (data.publish_LCS === 'YES') {
            this.lcsCheckedLocations.push('活动中心')
          }

          if (data.publish_LCS_top === 'YES') {
            this.lcsCheckedLocations.push('首页')
          }

          if (data.publish_PC === 'YES') {
            this.pcCheckedLocations.push('活动中心')
          }

          if (data.publish_PC_top === 'YES') {
            this.pcCheckedLocations.push('首页')
          }
          if (this.publishStatus !== 'NOT_YET') {
            this.chgPublish.editFormNoPublishVisible = true;
          }
          this.hctCheckAll = (this.hctCheckedLocations.length === 2);
          this.lcsCheckAll = (this.lcsCheckedLocations.length === 2);
          this.pcCheckAll = (this.pcCheckedLocations.length === 2);
          this.publishStatus = data.publishStatus;
        })
      },
      hctAllChange (event) {
        this.hctCheckedLocations = event.target.checked ? loactionOptions : []
        this.hctIsIndeterminate = false
      },
      hctCheckedChange (value) {
          console.log(value);
        let checkedCount = value.length
        this.hctCheckAll = checkedCount === this.locations.length
        this.hctIsIndeterminate = checkedCount > 0 && checkedCount < this.hctCheckedLocations.length
      },
      lscAllChange (event) {
        this.lcsCheckedLocations = event.target.checked ? loactionOptions : []
        this.lcsIsIndeterminate = false
      },
      lscCheckedChange (value) {
        let checkedCount = value.length
        this.lcsCheckAll = checkedCount === this.locations.length
        this.lcsIsIndeterminate = checkedCount > 0 && checkedCount < this.lcsCheckedLocations.length
      },
      pcAllChange (event) {
        this.pcCheckedLocations = event.target.checked ? loactionOptions : []
        this.pcIsIndeterminate = false
      },
      pcCheckedChange (value) {
        let checkedCount = value.length
        this.pcCheckAll = checkedCount === this.locations.length
        this.pcIsIndeterminate = checkedCount > 0 && checkedCount < this.pcCheckedLocations.length
      },
      closeForm(){
        this.$store.commit('SET_ChgStatusActFormVisible', false);
      },
      subMit () {
        this.submitStatusData = {}
        this.submitStatusData.activityId = this.$store.state.chgStatusActId;
        this.submitStatusData.publishStatus = this.publishStatus
        if (this.hctCheckedLocations.toString().indexOf('首页') >= 0) {
          this.submitStatusData.publish_HCT_top = 'YES'
        } else {
          this.submitStatusData.publish_HCT_top = 'NO'
        }

        if (this.hctCheckedLocations.toString().indexOf('活动中心') >= 0) {
          this.submitStatusData.publish_HCT = 'YES'
        } else {
          this.submitStatusData.publish_HCT = 'NO'
        }


        if (this.lcsCheckedLocations.toString().indexOf('首页') >= 0) {
          this.submitStatusData.publish_LCS_top = 'YES';
        } else {
          this.submitStatusData.publish_LCS_top = 'NO';
        }

        if (this.lcsCheckedLocations.toString().indexOf('活动中心') >= 0) {
          this.submitStatusData.publish_LCS = 'YES'
        } else {
          this.submitStatusData.publish_LCS = 'NO'
        }

        if (this.pcCheckedLocations.toString().indexOf('首页') >= 0) {
          this.submitStatusData.publish_PC_top = 'YES';
        } else {
          this.submitStatusData.publish_PC_top = 'NO';
        }

        if (this.pcCheckedLocations.toString().indexOf('活动中心') >= 0) {
          this.submitStatusData.publish_PC = 'YES';
        } else {
          this.submitStatusData.publish_PC = 'NO';
        }

        this.$http.put('/api-active/v1/api/activityCenter/activity/publish', this.submitStatusData).then((response) => {

          var data = response.body
          if (data.resultCode === '200') {
            this.$emit('refreshList');
            this.$store.commit('SET_ChgStatusActFormVisible', false);
            postLog('ACTIVITY_LIST_PUBLISH', this.actStatus.id, this.actStatus.name, this.submitStatusData)
          }
          this.showData = data.result
        })
      }
    }
  }
</script>
<style lang="stylus" scoped="scoped" rel="stylesheet/stylus">
  .el-row {
    margin-top: 10px;
  }

  .el-table-column {
    text-align: center;
  }

  .titleBox {
    height: 56px;
    border-bottom: 1px solid #ccc;
    text-align: left;
  }

  .title {
    display: block;
    height: 100%;
    text-align: left;
    line-height: 56px;
  }

  .pagMod {
    margin-top: 20px;
  }

  .title:nth-child(1) :after {
    content: "·";
  }

  .chgStatusForm {
    width: 800px;
    margin: 0 auto;
  }

  /*.myCheckBox, .spanRight*/
    /*text-align left*/

  .spanLelft
    font-weight bold
    text-align right
    /*margin-right 20px*/
    padding-left 20px

  .spanCheckBoxLelft
    font-weight bold
    text-align left
</style>
